<template>
  <div>
    <tab :line-width=2 active-color='#fc378c' v-model="index">
      <tab-item class="vux-center" :selected="initSelect === item" v-for="(item, index) in titleList" @click="initSelect = item" :key="index">{{item}}</tab-item>
    </tab>
    <swiper v-model="index" height="100px" :show-dots="false">
      <swiper-item v-for="(item, index) in titleList" :key="index">
        <div class="tab-swiper vux-center">
          <!-- {{item}} Container {{index}} -->
          <div v-if="index === 0">
            
          </div>
          <div v-if="index === 1">22222222</div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper, SwiperItem } from 'vux'
const titleList = () => ['正在热映','即将上映']
export default {
  data () {
    return {
      titleList: titleList(),
      initSelect: '即将上映',
      index: 0
    }
  },
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  },
  created(){
    this.initData();
  },
  methods: {
    async initData(){
      let url = this.$HOST + '/movie/in_theaters'
      const res = await this.$axios({
        method: 'GET',
        url: url,
        headers:{'content-type':'application/json'},
        data: {}
      });
      console.log(res,'豆瓣电影');
    },
    toggleClick(index){
      console.log(index,'ss');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
